﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <link href="/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div>
        <div class="page-header">
            <h3>修改用户</h3>
        </div>

        <div class="row">
            <div class="col-md-4  col-sm-6">
                <form>

                    <input type="hidden" id="userid" />

                    <div class="form-group">
                        <label>角色</label>
                        <select id="roleID" class="form-control">
                        </select>
                    </div>

                    <div class="form-group">
                        <label>姓名</label>
                        <input id="name" class="form-control" type="text" value="张某" />
                    </div>

                    <div class="form-group">
                        <label>性别</label>
                        <div class="radio">
                            <label>
                                <input type="radio" name="sex" id="sex_nan" checked
                                       value="男">
                                男
                            </label>
                            <label>
                                <input type="radio" name="sex" id="sex_nv"
                                       value="女">
                                女
                            </label>
                        </div>

                    </div>

                    <div class="form-group">
                        <label>出生日期</label>
                        <input id="birthday" class="form-control" type="datetime-local" value="2006-06-06 00:00:00" />
                    </div>

                    <div class="form-group">
                        <label>手机号码</label>
                        <input id="phone" class="form-control" type="text" value="15512345678" />
                    </div>

                    <div class="form-group">
                        <label>密码</label>
                        <input id="pwd" class="form-control" type="text" value="123" />
                    </div>

                    <div class="form-group">
                        <label>状态</label>
                        <div class="checkbox">
                            <label><input type="checkbox" id="status" checked value="">正常</label>
                        </div>
                    </div>

                    <div class="form-group">
                        <input type="button" class="btn btn-success" value="立即保存" onclick="Save()" />
                    </div>

                </form>
            </div>
        </div>

    </div>


    <script src="/Static/Script/jquery-3.7.0.min.js"></script>
    <script type="text/javascript">

        //获取URL 后面的参数 的公共方法
        function getUrlParam(paramName) {
            const reg = new RegExp(`[?&]${paramName}=([^&#]*)`, 'i');
            const match = reg.exec(location.href);
            return match ? decodeURIComponent(match[1]) : null;
        }

        var id = getUrlParam("id");

        $("#userid").val(id);
        //$("#name").val(getUrlParam("name"));

        //异步查询
        //获取角色数据并给下拉框赋值

        //先查询角色列表 再查询用户信息
        $.get("/Ajax/RolesHandler.ashx?type=all", function (res) {
            console.log(res);
            res.data.forEach(function (v) {
                $('<option></option>').val(v.RoleID).text(v.RoleName)
                    .appendTo($("#roleID"));
            })

            $.get("/Ajax/UsersHandler.ashx?type=info", { id: id }, function (res) {
                console.log(res);
                if (res.code == 1) {
                    $("#name").val(res.data.Name);
                    $("#birthday").val(res.data.Birthday);
                    $("#phone").val(res.data.Phone);
                    $("#pwd").val(res.data.Pwd);
                    $("#name").val(res.data.Name);
                    if (res.data.Sex == "男")
                        $("#sex_nan").prop("checked", true);
                    else
                        $("#sex_nv").prop("checked", true);

                    $("#status").prop("checked", res.data.Status);

                    $("#roleID").val(res.data.RoleID);
                }
            })
        })





        function Save() {
            var userID = $("#userid").val()
            var roleID = $("#roleID").val();
            var name = $("#name").val();
            var sex = $("input[name=sex]:checked").val();
            var birthday = $("#birthday").val();
            var phone = $("#phone").val();
            var pwd = $("#pwd").val();
            //var status = $("#status")[0].checked;  // js 用法
            var status = $("#status").prop("checked")  // jq 用法


            $.post("/Ajax/UsersHandler.ashx?type=update", {
                model: JSON.stringify({
                    userid: userID,
                    roleid: roleID,
                    name: name,
                    sex: sex,
                    birthday: birthday,
                    phone: phone,
                    pwd: pwd,
                    status: status
                })
            }, function (res) {
                console.log(res);
                if (res.code == 1) {
                    alert(res.msg);
                    location.href = "Index.html";
                } else {
                    alert(res.msg);
                }
            })
        }



    </script>

</body>
</html>